<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/other/jquery-3.2.1.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {

			});

			//HTML5+ Storage 获取应用存储区中保存的键值对的个数
			var getStorageCount = function() {
				return plus.storage.getLength();
			};

			//HTML5+ Storage 通过键(key)检索获取应用存储的值
			var getStorageValue = function(key) {
				return plus.storage.getItem(key);
			};

			/**
			 * HTML5+ Storage 修改或添加键值(key-value)对数据到应用数据存储中
			 * 如果设置的键在应用数据存储中已经存在，更新存储的键值。 存储的键和值没有容量限制，但过多的数据量会导致效率降低，建议单个键值数据不要超过10Kb。
			 * @param {Object} key
			 * @param {Object} value
			 */
			var updateStorageValue = function(key, value) {
				plus.storage.setItem(key, value);
			};

			/**
			 * 通过key值删除键值对存储的数据
			 * @param {Object} key
			 */
			var removeStorageItem = function(key) {
				plus.storage.removeItem(key);
			};

			/**
			 * 清除应用所有的键值对存储数据
			 */
			var clearStorage = function() {
				plus.storage.clear();
			};

			/**
			 * 获取键值对中指定索引值的key值
			 * @param {Object} index
			 */
			var getKey = function(index) {
				return plus.storage.key(index);
			};

			/**
			 * 刷新UI，显示本地所有数据
			 */
			var refreshAllDataUI = function() {
				$(".showMsg").empty();
				var dataSize = getStorageCount();
				for(var i = 0; i <= dataSize - 1; i++) {
					var tempKey = getKey(i);
					var tempValue = getStorageValue(tempKey);
					$("#btn_show").before("<h5 class='showMsg'>key:" + tempKey + "  value:" + tempValue + "</h5>");
				}
			};

			function addAndUpdate() {
				var key = $("#keyAddUpdate").val();
				var value = $("#valueAddUpdate").val();
				updateStorageValue(key, value);
			};

			function removeItem() {
				var keyRemove = $("#keyRemove").val();
				removeStorageItem(keyRemove);
			};
			
			function clearAllData(){
				clearStorage();
			};
		</script>
	</head>

	<body bgcolor="#FFFFFF">

		<div class="mui-content" align="center">
			<div class="mui-card" style="padding: 5px;">
				<span>
					HTML5+
					Storage 模块管理应用本地数据存储区，用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同，前者可在应用内跨域操作，数据存储期是持久化的，并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。
				</span>
			</div>

			<div id="allData" style="background: #E6E6FA;width: 90%;padding: 5px;border: dashed;border-color: #0062CC;border-width: 2px;margin-bottom: 5px;">
				<button id="btn_show" class="mui-btn" style="width: 80%;font-size: 10px;" onclick="refreshAllDataUI()">刷新</button>
			</div>

			<div>
				<table>
					<tr>
						<td>key:</td>
						<td><input type="text" id="keyAddUpdate" /></td>
					</tr>
					<tr>
						<td>value:</td>
						<td><input type="text" id="valueAddUpdate" /></td>
					</tr>
					<tr align="center">
						<td colspan="2" style="padding-bottom: 10px;">
							<button class="mui-btn-green " style="width: 100%;" onclick="addAndUpdate()">添加或更新</button>
						</td>
					</tr>

					<tr>
						<td>removeItemKey:</td>
						<td><input type="text" id="keyRemove" /></td>
					</tr>

					<tr align="center">
						<td colspan="2">
							<button class="mui-btn-green " style="width: 100%;" onclick="removeItem()">按键删除数据</button>
						</td>
					</tr>

					<tr align="center">
						<td colspan="2" style="padding-top: 10px;">
							<button class="mui-btn-green " style="width: 100%;" onclick="clearAllData()">清除所有数据</button>
						</td>
					</tr>
				</table>
			</div>
		</div>

	</body>

</html>